<template>
  <q-header bordered class="bg-white text-dark row">
    <accounts-tabs
      v-model="data.account.tab"
      v-model:account="data.account.value"
      inline-label
      outside-arrows
      mobile-arrows
      :breakpoint="0"
      class="col-auto"
    ></accounts-tabs>
    <q-separator />
    <q-toolbar class="bg-grey-2 text-dark" style="min-height: 40px">
      <div
        class="browser-navtab"
        @click="data.tab = 0"
        :class="{ active: data.tab === 0 }"
      >
        <div class="navtab__control">{{ data.title }}</div>
      </div>
      <div
        class="browser-navtab"
        @click="data.tab = 1"
        :class="{ active: data.tab === 1 }"
      >
        <div class="navtab__control">{{ data.title }}</div>
      </div>
    </q-toolbar>
    <q-toolbar class="bg-white text-dark">
      <q-btn flat round dense>
        <q-icon name="iconfont icon-arrow-left-bold" size="16px" />
      </q-btn>
      <q-btn flat round dense>
        <q-icon name="iconfont icon-arrow-right-bold" size="16px" />
      </q-btn>
      <q-btn flat round dense>
        <q-icon name="iconfont icon-shuaxin" size="19px" />
      </q-btn>
      <q-toolbar-title>
        <q-form @submit="onSearch">
          <q-input
            class="href-input"
            v-model="data.href"
            type="text"
            rounded
            outlined
            dense
          />
        </q-form>
      </q-toolbar-title>
      <q-btn flat round dense icon="more_vert" />
    </q-toolbar>
  </q-header>
</template>

<style lang="scss" scoped>
.browser-navtab {
  padding-top: 6px;
  height: 100%;
  .navtab__control {
    cursor: pointer;
    height: 100%;
    padding: 6px 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative;
  }

  &.active {
    .navtab__control {
      background: white;
      &::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: -8px;
        width: 8px;
        height: 8px;
        background: radial-gradient(circle at 0% 0%, transparent 8px, #fff 0);
      }
      &::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        right: -8px;
        width: 8px;
        height: 8px;
        background: radial-gradient(circle at 100% 0%, transparent 8px, #fff 0);
      }
    }
  }
}
</style>

<style lang="scss">
.href-input {
  .q-field__control,
  .q-field__marginal {
    height: 32px !important;
  }
}
</style>

<script>
import { defineComponent, reactive, inject } from "vue";
import AccountsTabs from "src/components/AccountsTabs.vue";
const aaa = window.require("electron");
console.log(aaa);
const { webFrame } = aaa;
export default defineComponent({
  name: "ComponentsHeadersChanceHeaderVue",
  components: { AccountsTabs },
  setup() {
    const bus = inject("bus");
    const data = reactive({
      tab: 0,
      title: "新标签",
      href: "https://supeicommunicate.zbj.com/seller",
      webview: null,
      account: {
        tab: 0,
        value: null,
      },
    });
    function listenerUploadTitle(e) {
      console.log(e.title);
      data.title = e.title;
    }

    /**
     *
     * @param { Document} webview
     */
    function listenerLoadWebvie(webview) {
      webview.addEventListener("page-title-updated", listenerUploadTitle);
    }

    bus.on("loadWebview", listenerLoadWebvie);

    function onSearch() {
      bus.emit("search-href", data.href);
    }
    return { data, onSearch };
  },
});
</script>
